<template>
  <view>
    <swiper :indicator-dots="imageComputed.length > 1" autoplay circular class="image">
      <swiper-item v-for="image in imageComputed" :key="image" @click="() => preview(image)">
        <image :src="$util.parse(image)" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <uni-forms style="padding-left: 10rpx;">
      <uni-forms-item label="车型" :label-width="100">
        <text>{{ dataComputed.type }}</text>
      </uni-forms-item>
      <uni-forms-item label="故障码" :label-width="100">
        <text>{{ dataComputed.code }}</text>
      </uni-forms-item>
      <uni-forms-item label="故障码释义" :label-width="100">
        <text>{{ dataComputed.phenomenon }}</text>
      </uni-forms-item>
      <uni-forms-item label="故障位置" :label-width="100">
        <text>{{ dataComputed.result }}</text>
      </uni-forms-item>
      <uni-forms-item label="涉及工段" :label-width="100">
        <text>{{ dataComputed.responsibility }}</text>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<script lang="ts" setup>
import { useFaultRecord } from '@/stores'
import { computed, ref } from 'vue'


const faultRecordStore = useFaultRecord()

const dataComputed = computed(() => {
  return faultRecordStore.faultRecord ?? {} as FaultRecordDto
})

const imageComputed = computed(() => {
  return faultRecordStore.faultRecord?.info.images
})

function preview(image) {
  const index = imageComputed.value.indexOf(image)
  uni.previewImage({
    urls: imageComputed.value.map(a => uni.$util.parse(a)),
    current: index,
    loop: true,
    indicator: 'default'
  })
}

</script>

<style lang="scss" scoped>
.image {
  width: 750rpx;
  height: 450rpx;

  image {
    width: 750rpx;
    height: 450rpx;
  }
}

:deep(.uni-forms-item__content) {
  display: flex;
  align-items: center;
}
</style>